<template>
  <view class="skeleton-placeholder" :style="{ width: width, height: height }">
    <view class="skeleton-animation"></view>
  </view>
</template>

<script>
export default {
  name: 'placeholder',
  options: {
    virtualHost: true
  },
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100rpx'
    }
  }
}
</script>

<style scoped>
.skeleton-placeholder {
  background-color: #f5f5f5;
  position: relative;
  overflow: hidden;
  border-radius: 8rpx;
}
.skeleton-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
</style> 